<template>
  <el-scrollbar style="height: 100%" class="opration-container">
    <div class="opration">
      <div class="oprationLeft">
        <el-form :inline="true" size="small" :model="searchForm">
          <el-form-item>
            <bs-set-button-icon
              @click.native="doSet"
              v-has="'TERMINAL_TERMINAL_UPDATE'"
            ></bs-set-button-icon>
            <bs-state-button-icon
              @click.native="doStateInfo"
              :disabled="stateBtnDisabled"
            ></bs-state-button-icon>
            <download-excel
              type="primary"
              class="export-excel-wrapper"
              :fetch="doExport"
              :fields="excelDataFields"
              :worksheet="worksheet"
              :name="excelFileName"
            >
              <bs-export-button-icon></bs-export-button-icon>
            </download-excel>

            <el-select
              class="show-item commad"
              v-has="'TERMINAL_TERMINAL_UPDATE'"
              size="small"
              v-model="commonItem"
              :placeholder="$t('命令')"
              style="width: 70px"
              @change="doChangeOrder"
            >
              <el-option
                v-for="(item, index) in orderData"
                :key="index"
                :label="$t(item.name)"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              class="show-item"
              size="small"
              v-model="showItem"
              :placeholder="$t('在线状态')"
              style="width: 100px"
              @change="doChangeItem"
              @clear="doClearItem(false)"
            >
              <el-option
                v-for="(item, index) in showItemData"
                :key="index"
                :label="$t(item.name)"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              class="show-item"
              size="small"
              v-model="refreshTimeItem"
              placeholder="5s"
              style="width: 70px"
            >
              <el-option
                v-for="(item, index) in refreshItemData"
                :key="index"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <bs-time-refresh-button-icon
              @click.native="doTimeList"
            ></bs-time-refresh-button-icon>
            <bs-refresh-now-button-icon
              @click.native="doTimeListIm"
            ></bs-refresh-now-button-icon>
          </el-form-item>
        </el-form>
      </div>
      <div class="oprationRight">
        <el-form :inline="true" size="small" :model="queryData">
          <el-form-item>
            <el-select
              v-model="queryData.queryType"
              :placeholder="$t('全部选项')"
              clearable
              style="width: 100px"
              @clear="doClearQuery"
            >
              <el-option
                v-for="(item, index) in searchItemData"
                :key="index"
                :label="$t(item.name)"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              :placeholder="$t('请输入关键词搜索')"
              v-model="queryData.queryParam"
              clearable
              style="width: 160px"
            >
              <template slot="prepend"
                ><i class="iconfont icon-sousuo"
              /></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <bs-search-button-icon
              @click.native="doList"
            ></bs-search-button-icon>
          </el-form-item>
        </el-form>
        <device-terminal-upgrade-dialog></device-terminal-upgrade-dialog>
        <insert-text-dialog></insert-text-dialog>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
import DeviceTerminalUpgradeDialog from './DeviceTerminalUpgradeDialog'
import InsertTextDialog from './InsertTextDialog'
import DownloadExcel from 'vue-json-excel'
import DeviceMonitorApi from '@/api/device'

export default {
  name: 'DeviceMonitorCondition',
  data() {
    return {
      searchForm: {},
      showItem: '',
      refreshTimeItem: '',
      commonItem: '',
      orderData: [],
      showItemData: [
        { name: '全部', value: -1 },
        { name: '离线', value: 0 },
        { name: '在线', value: 1 },
        { name: '待机', value: 2 },
      ],
      refreshItemData: [
        { name: '5s', value: 5 },
        { name: '10s', value: 10 },
        { name: '20s', value: 20 },
        { name: '30s', value: 30 },
        { name: '40s', value: 40 },
      ],
      searchItemData: [
        { name: '全部选项', value: 0 },
        { name: '终端名称', value: 1 },
        { name: 'MAC地址', value: 2 },
        { name: '安装位置', value: 3 },
        { name: '软件版本', value: 11 },
      ],
      loading: null,
      timer: '',
      //----------export data
      worksheet: '终端监控统计数据',
      excelFileName: '终端监控统计数据.xls',
      excelDataFields: {
        名称: 'name',
        MAC地址: 'macText',
        状态:  {
          field: "online",
                    //自定义回调函数
          callback: value => this.onlineFilter(value)
        },
        终端IP: 'connectIp',
        '4G信号': 'simSignal',
        软件版本: 'swVersion',
        当前SIM串号:   {
          field: "simIccid",
          callback: value => `&nbsp;${value}`,
        },
        最后上线时间: 'lastOnlineTime',
        最后心跳时间: 'lastHeartTime',
        在线时间: 'onlineTime',
        当前节目: 'program',
        下载率: 'programDownPercent',
      },
      queryExportData: [],
    }
  },
  props: {
    stateBtnDisabled: {
      type: Boolean,
      default: false,
    },
    queryData: {
      default: {},
    },
    exportData: {
      type: Array,
      default() {
        return []
      },
    },
  },
  mounted() {
    this.$nextTick(function () {
      this.loadOrderDataItem()
    })
  },
  components: {
    DeviceTerminalUpgradeDialog,
    InsertTextDialog,
    DownloadExcel,
  },
  methods: {
    loadOrderDataItem() {
      let orderDataItem = [
        { name: '开机', value: 'kj' },
        { name: '重启', value: 'cq' },
        { name: '待机', value: 'dj' }
      ]
      // 电子围栏待机权限
      if(this.$checkOperationPermission('TERMINAL_TERMINAL_AROUND_IDLE')) {
        orderDataItem.push({ name: '电子围栏待机', value: 'dzwldj' })
      }
      orderDataItem.push({ name: '网络校时', value: 'jd' })
      orderDataItem.push({ name: '上传当前系统日志文件', value: 'scxt' })
      orderDataItem.push({ name: '上传当前播放日志文件', value: 'scbf' })
      // 紧急插播权限
      if(this.$checkOperationPermission('MEDIA_SCHEDULE_URGENT')) {
        orderDataItem.push({ name: '紧急插播', value: 'cb' })
      }
      // 清理文件权限：TERMINAL_STATUS_CLEAR
      if(this.$checkOperationPermission('TERMINAL_STATUS_CLEAR')) {
        orderDataItem.push({ name: '清理播出文件', value: 'ql' })
      }
      // 终端升级权限：TERMINAL_STATUS_UPGRADE
      if(this.$checkOperationPermission('TERMINAL_STATUS_UPGRADE')) {
        orderDataItem.push({ name: '终端升级', value: 'sj' })
      }
      // 终端DTMB切换权限：TERMINAL_TERMINAL_SWITCH_DTMB
      if(this.$checkOperationPermission('TERMINAL_TERMINAL_SWITCH_DTMB')) {
        orderDataItem.push({ name: '开启紧急DTMB', value: 'kqdtmb' })
        orderDataItem.push({ name: '取消紧急DTMB', value: 'gbdtmb' })
      }

      this.orderData = orderDataItem
    },
    doSet() {
      this.$eventBus.$emit('doSet')
    },
    doStateInfo() {
      this.$eventBus.$emit('doStateInfo')
    },
    updateLoading(val){
      if(val){
        if (this.loading === null) {
          this.loading = this.$loading({
            fullscreen: true,
            text: '正在导出终端数据',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
        }
      }else{
        if (this.loading) {
          this.loading.close()
          this.loading = null
        }
      }
    },
    async doExport() {
      if(this.queryData.allSize) {
        this.updateLoading(true)
        var queryData = this.queryData
        queryData.current = 1
        queryData.size = 10000
        try {
          const res = await DeviceMonitorApi.deviceMonitorList(queryData)
           this.updateLoading(false)
          if (res) {
            this.queryExportData = res.records ? res.records: []
            if(this.queryExportData.length === 0) {
              this.$alert('提示', '没有导出的数据')
              return
            }
          }
      } catch (e) {
         this.updateLoading(false)
      }
      return this.queryExportData
      } else {
        if (this.exportData.length === 0) {
          this.$alert('提示', '请先选择需要导出的数据')
          return
        }
      }
      return this.exportData
    },
    doChangeOrder(data) {
      // var commad = document.getElementsByClassName('commad')
      // commad[0].style.width = this.orderWidth[data]
      this.$eventBus.$emit('doChangeOrder', data)
      this.commonItem = ''
    },
    // 显示子元素
    doChangeItem(val) {
      if (val == -1) {
        delete this.queryData.online
      } else {
        this.queryData.online = val
      }
      this.doList()
    },
    doClearItem() {
      this.queryData.showChild = false
    },
    // 查询
    doList() {
      this.queryData.page = 1
      this.$eventBus.$emit('doList', this.queryData)
    },
    // 点击清除下拉选择条件
    doClearQuery() {
      // this.queryData.queryType = 0
      // this.queryData.queryParam = ''
      this.$set(this.queryData, 'queryType', 0)
      this.$set(this.queryData, 'queryParam', '')
    },
    // 定时刷新
    doTimeList() {
      if(this.timer) {
        clearInterval(this.timer)
        this.timer = null
        this.$message.success('定时刷新已关闭')
      } else {
        let timeout = 5
        if(this.refreshTimeItem) {
            timeout = this.refreshTimeItem
        }
        this.timer = setInterval(() => {
            this.doList()
        }, timeout * 1000)
        this.$message.success('定时刷新已开启')
      }
    },
    // 立刻刷新
    doTimeListIm() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = ''
      }
      this.doList()
      this.$message.success('刷新成功')
    },
    onlineFilter(val) {
      if (val == 1) {
        return this.$t('在线')
      } else if(val == 2) {
        return this.$t('待机')
      } else {
        return this.$t('离线')
      }
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = ''
      this.$message.success('定时刷新已关闭')
    }
  },
}
</script>

<style lang="scss" scoped>
.el-select-dropdown__item {
  font-size: 13px;
  height: 28px;
  line-height: 28px;
}
.export-excel-wrapper{
  display: inline-block;
  width: 64px;
  margin-right: 8px;
}
</style>
